diff --git a/swh/web/assets/config/bootstrap-pre-customize.scss b/swh/web/assets/config/bootstrap-pre-customize.scss
index 6e8f0d16..6274310a 100644
--- a/swh/web/assets/config/bootstrap-pre-customize.scss
+++ b/swh/web/assets/config/bootstrap-pre-customize.scss
@@ -1,33 +1,37 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 // override some global boostrap sass variables before generating stylesheets
 
 // global text colors and fonts
 $body-color: rgba(0, 0, 0, 0.55);
 $font-family-sans-serif: "Alegreya Sans", sans-serif;
 $link-color: rgba(0, 0, 0, 0.75);
 $code-color: #c7254e;
 
 // headings
 $headings-line-height: 1.1;
 $headings-color: #e20026;
 $headings-font-family: "Alegreya Sans", sans-serif;
 
 // remove the ugly box shadow from bootstrap 4.x
 $input-btn-focus-width: 0;
 
 // dropdown menu padding
 $dropdown-padding-y: 0.25rem;
 $dropdown-item-padding-x: 0;
 $dropdown-item-padding-y: 0;
 
 // card header padding
 $card-spacer-y: 0.5rem;
 
+// nav pills colors
 $nav-pills-link-active-color: rgba(0, 0, 0, 0.55);
-$nav-pills-link-active-bg: #f2f4f5;
\ No newline at end of file
+$nav-pills-link-active-bg: #f2f4f5;
+
+// table cell padding
+$table-cell-padding: 0.4rem;
diff --git a/swh/web/assets/src/bundles/browse/origin-search.js b/swh/web/assets/src/bundles/browse/origin-search.js
index b86ab6b3..e4a0ba9c 100644
--- a/swh/web/assets/src/bundles/browse/origin-search.js
+++ b/swh/web/assets/src/bundles/browse/origin-search.js
@@ -1,164 +1,164 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 import {heapsPermute} from 'utils/heaps-permute';
 import {handleFetchError} from 'utils/functions';
 
 let originPatterns;
-let perPage = 15;
+let perPage = 20;
 let limit = perPage * 10;
 let offset = 0;
 let currentData = null;
 let inSearch = false;
 
 function fixTableRowsStyle() {
   setTimeout(() => {
     $('#origin-search-results tbody tr').removeAttr('style');
   });
 }
 
 function clearOriginSearchResultsTable() {
   $('#origin-search-results tbody tr').remove();
 }
 
 function populateOriginSearchResultsTable(data, offset) {
   let localOffset = offset % limit;
   if (data.length > 0) {
     $('#swh-origin-search-results').show();
     $('#swh-no-origins-found').hide();
     clearOriginSearchResultsTable();
     let table = $('#origin-search-results tbody');
     for (let i = localOffset; i < localOffset + perPage && i < data.length; ++i) {
       let elem = data[i];
       let tableRow = '<tr>';
       tableRow += '<td style="width: 120px;">' + elem.type + '</td>';
       let browseUrl = Urls.browse_origin(elem.type, elem.url);
       tableRow += '<td style="white-space: nowrap;"><a href="' + browseUrl + '">' + browseUrl + '</a></td>';
       tableRow += '<td id="visit-status-origin-' + elem.id + '"><i title="Checking visit status" class="fa fa-refresh fa-spin"></i></td>';
       tableRow += '</tr>';
       table.append(tableRow);
       // get async latest visit snapshot and update visit status icon
       let latestSnapshotUrl = Urls.browse_origin_latest_snapshot(elem.id);
       fetch(latestSnapshotUrl, {credentials: 'same-origin'})
         .then(response => response.json())
         .then(data => {
           let originId = elem.id;
           $('#visit-status-origin-' + originId).children().remove();
           if (data) {
             $('#visit-status-origin-' + originId).append('<i title="Origin has at least one full visit by Software Heritage" class="fa fa-check"></i>');
           } else {
             $('#visit-status-origin-' + originId).append('<i title="Origin has not yet been visited by Software Heritage or does not have at least one full visit" class="fa fa-times"></i>');
           }
         });
     }
     fixTableRowsStyle();
   } else {
     $('#swh-origin-search-results').hide();
     $('#swh-no-origins-found').show();
   }
   if (data.length - localOffset < perPage ||
       (data.length < limit && (localOffset + perPage) === data.length)) {
     $('#origins-next-results-button').addClass('disabled');
   } else {
     $('#origins-next-results-button').removeClass('disabled');
   }
   if (offset > 0) {
     $('#origins-prev-results-button').removeClass('disabled');
   } else {
     $('#origins-prev-results-button').addClass('disabled');
   }
   inSearch = false;
   setTimeout(() => {
     window.scrollTo(0, 0);
   });
 }
 
 function searchOrigins(patterns, limit, searchOffset, offset) {
   originPatterns = patterns;
   let patternsArray = patterns.trim().replace(/\s+/g, ' ').split(' ');
   let patternsPermut = [];
   heapsPermute(patternsArray, p => patternsPermut.push(p.join('.*')));
   let regex = patternsPermut.join('|');
   let searchUrl = Urls.browse_origin_search(regex) + `?limit=${limit}&offset=${searchOffset}&regexp=true`;
 
+  clearOriginSearchResultsTable();
   $('.swh-loading').addClass('show');
   fetch(searchUrl, {credentials: 'same-origin'})
     .then(handleFetchError)
     .then(response => response.json())
     .then(data => {
       currentData = data;
       if (typeof Storage !== 'undefined') {
         sessionStorage.setItem('last-swh-origin-url-patterns', patterns);
         sessionStorage.setItem('last-swh-origin-search-results', JSON.stringify(data));
         sessionStorage.setItem('last-swh-origin-search-offset', offset);
       }
       $('.swh-loading').removeClass('show');
       populateOriginSearchResultsTable(data, offset);
     })
     .catch(() => {
       $('.swh-loading').removeClass('show');
       inSearch = false;
     });
 }
 
 export function initOriginSearch() {
   $(document).ready(() => {
     if (typeof Storage !== 'undefined') {
       originPatterns = sessionStorage.getItem('last-swh-origin-url-patterns');
       let data = sessionStorage.getItem('last-swh-origin-search-results');
       offset = sessionStorage.getItem('last-swh-origin-search-offset');
       if (data) {
         $('#origins-url-patterns').val(originPatterns);
         offset = parseInt(offset);
         populateOriginSearchResultsTable(JSON.parse(data), offset);
       }
     }
 
     $('#search_origins').submit(event => {
       let patterns = $('#origins-url-patterns').val();
       offset = 0;
       inSearch = true;
-      clearOriginSearchResultsTable();
       searchOrigins(patterns, limit, offset, offset);
       event.preventDefault();
     });
 
     $('#origins-next-results-button').click(event => {
       if ($('#origins-next-results-button').hasClass('disabled') || inSearch) {
         return;
       }
       inSearch = true;
       offset += perPage;
       if (!currentData || offset % limit === 0) {
         searchOrigins(originPatterns, limit, offset, offset);
       } else {
         populateOriginSearchResultsTable(currentData, offset);
       }
       event.preventDefault();
     });
 
     $('#origins-prev-results-button').click(event => {
       if ($('#origins-prev-results-button').hasClass('disabled') || inSearch) {
         return;
       }
       inSearch = true;
       offset -= perPage;
       if (!currentData || (offset > 0 && (offset + perPage) % limit === 0)) {
         searchOrigins(originPatterns, limit, (offset + perPage) - limit, offset);
       } else {
         populateOriginSearchResultsTable(currentData, offset);
       }
       event.preventDefault();
     });
 
     $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', e => {
       if (e.currentTarget.text.trim() === 'Search') {
         fixTableRowsStyle();
       }
     });
   });
 }
diff --git a/swh/web/assets/src/bundles/webapp/webapp.css b/swh/web/assets/src/bundles/webapp/webapp.css
index 6383e45a..4c424db7 100644
--- a/swh/web/assets/src/bundles/webapp/webapp.css
+++ b/swh/web/assets/src/bundles/webapp/webapp.css
@@ -1,364 +1,369 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 html {
     height: 100%;
     overflow-x: hidden;
 }
 
 body {
     min-height: 100%;
     margin: 0;
     position: relative;
     padding-bottom: 120px;
 }
 
 a {
     border-bottom-style: none;
     outline: none;
 }
 
 code {
     background-color: #f9f2f4;
 }
 
 pre code {
     background-color: transparent;
 }
 
 footer {
     background-color: #262626;
     color: #fff;
     font-size: 0.8rem;
     position: absolute;
     bottom: 0;
     width: 100%;
     padding-top: 20px;
     padding-bottom: 20px;
+    z-index: 3000;
 }
 
 footer a,
 footer a:visited {
     color: #fecd1b;
 }
 
 footer a:hover {
     text-decoration: underline;
 }
 
 pre {
     background-color: #f5f5f5;
     border: 1px solid #ccc;
     border-radius: 4px;
     padding: 9.5px;
     font-size: 0.8rem;
 }
 
 .btn.active {
     background-color: #e7e7e7;
 }
 
 .card {
     margin-bottom: 5px !important;
     overflow-x: auto;
 }
 
 .navbar-brand {
     padding: 5px;
     margin-right: 0;
 }
 
 .table {
     margin-bottom: 0;
 }
 
 .swh-web-app-link a {
     text-decoration: none;
     outline: none;
     border: none;
 }
 
 .swh-web-app-link:hover {
     background-color: #efeff2;
 }
 
 .table > thead > tr > th {
     border-top: none;
     border-bottom: 1px solid #e20026;
 }
 
 .table > tbody > tr > td {
     border-style: none;
 }
 
 .sitename .first-word,
 .sitename .second-word {
     color: rgba(0, 0, 0, 0.75);
     font-weight: normal;
     font-size: 1.2rem;
 }
 
 .sitename .first-word {
     font-family: 'Alegreya Sans', sans-serif;
 }
 
 .sitename .second-word {
     font-family: 'Alegreya', serif;
 }
 
 .swh-api-doc-route-upcoming > td,
 .swh-api-doc-route-upcoming > td > a {
     font-size: 90%;
 }
 
 .swh-api-doc-route-deprecated > td,
 .swh-api-doc-route-deprecated > td > a {
     color: red;
 }
 
 .swh-api-doc p {
     margin-bottom: 0;
 }
 
 .swh-api-doc dt {
     text-align: right;
 }
 
 .swh-counter {
     font-size: 150%;
 }
 
 .swh-http-error {
     margin: 0 auto;
     text-align: center;
 }
 
 .swh-http-error-head {
     color: #2d353c;
     font-size: 30px;
 }
 
 .swh-http-error-code {
     bottom: 60%;
     color: #2d353c;
     font-size: 96px;
     line-height: 80px;
     margin-bottom: 10px !important;
 }
 
 .swh-http-error-desc {
     font-size: 12px;
     color: #647788;
     text-align: center;
 }
 
 .swh-http-error-desc pre {
     display: inline-block;
     text-align: left;
     max-width: 800px;
     white-space: pre-wrap;
 }
 
 .popover {
     max-width: 100%;
     z-index: 2000;
 }
 
 .modal {
     text-align: center;
     padding: 0 !important;
 }
 
 .modal::before {
     content: '';
     display: inline-block;
     height: 100%;
     vertical-align: middle;
     margin-right: -4px;
 }
 
 .modal-dialog {
     display: inline-block;
     text-align: left;
     vertical-align: middle;
 }
 
 .dropdown-submenu {
     position: relative;
 }
 
 .dropdown-submenu .dropdown-menu {
     top: 0;
     left: -100%;
     margin-top: -5px;
     margin-left: -2px;
 }
 
 .dropdown-item:hover,
 .dropdown-item:focus {
     background-color: rgba(0, 0, 0, 0.1);
 }
 
 a.dropdown-left::before {
     content: "\f0d9";
     font-family: 'FontAwesome';
     display: block;
     width: 20px;
     height: 20px;
     float: left;
     margin-left: 0;
 }
 
 #swh-navbar {
     border-top-style: none;
     border-left-style: none;
     border-right-style: none;
     border-bottom: 5px solid;
     border-image: linear-gradient(to right, rgb(226, 0, 38) 0%, rgb(254, 205, 27) 100%) 1 1 1 1;
     width: 100%;
     padding: 5px;
     margin-bottom: 20px;
     margin-top: 30px;
     justify-content: normal;
     flex-wrap: nowrap;
 }
 
 #back-to-top {
     display: initial;
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 10;
 }
 
 #back-to-top a img {
     display: block;
     width: 32px;
     height: 32px;
     background-size: 32px 32px;
     text-indent: -999px;
     overflow: hidden;
 }
 
 .swh-top-bar {
     direction: ltr;
     height: 30px;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 99999;
     background-color: #262626;
     color: #fff;
     text-align: center;
     font-size: 14px;
 }
 
 .swh-top-bar ul {
     margin-top: 4px;
     padding-left: 0;
     white-space: nowrap;
 }
 
 .swh-top-bar li {
     display: inline-block;
     margin-left: 10px;
     margin-right: 10px;
 }
 
 .swh-top-bar a,
 .swh-top-bar a:visited {
     color: white;
 }
 
 .swh-top-bar a.swh-current-site,
 .swh-top-bar a.swh-current-site:visited {
     color: #fecd1b;
 }
 
 .swh-donate-item {
     position: absolute;
     right: 0;
 }
 
 .swh-donate-link {
     border: 1px solid #fecd1b;
     background-color: #e20026;
     color: white !important;
     padding: 3px;
     border-radius: 3px;
 }
 
 .swh-navbar-content h4 {
     padding-top: 7px;
 }
 
 .swh-navbar-content .bread-crumbs {
     display: block;
     margin-left: -40px;
 }
 
 .swh-navbar-content .bread-crumbs li.bc-no-root {
     padding-top: 7px;
 }
 
 .main-sidebar {
     margin-top: 30px;
 }
 
 .content-wrapper {
     background: none;
 }
 
 .brand-image {
     max-height: 40px;
 }
 
 .brand-link {
     padding-top: 18.5px;
     padding-bottom: 18px;
     padding-left: 4px;
     border-bottom: 5px solid #e20026 !important;
 }
 
 .navbar-header a,
 ul.dropdown-menu a,
 ul.navbar-nav a,
 ul.nav-sidebar a {
     border-bottom-style: none;
     color: #323232;
 }
 
 .swh-sidebar .nav-link.active {
     color: #323232 !important;
     background-color: #e7e7e7 !important;
 }
 
 .swh-image-error {
     width: 80px;
     height: auto;
 }
 
 @media (max-width: 600px) {
     .swh-image-error {
         width: 40px;
         height: auto;
     }
 }
 
 .form-check-label {
     padding-top: 4px;
 }
 
 .swh-id-option {
     display: inline-block;
     margin-right: 5px;
 }
 
 .nav-pills .nav-link:not(.active):hover {
     color: rgba(0, 0, 0, 0.55);
 }
+
+.swh-heading-color {
+    color: #e20026;
+}
diff --git a/swh/web/templates/includes/directory-display.html b/swh/web/templates/includes/directory-display.html
index b1e21be1..ebfc0d39 100644
--- a/swh/web/templates/includes/directory-display.html
+++ b/swh/web/templates/includes/directory-display.html
@@ -1,43 +1,40 @@
 {% comment %}
 Copyright (C) 2017-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 <div class="table-responsive">
   <table class="table swh-directory-table">
     <thead>
       <tr>
         <th>File</th>
         <th>Mode</th>
         <th>Size</th>
-        <th>Sha1 git</th>
       </tr>
     </thead>
     <tbody>
       {% for d in dirs %}
         <tr>
           <td class="swh-directory">
             <i class="fa fa-folder fa-fw" aria-hidden="true"></i>
             <a href="{{ d.url | safe }}">{{ d.name }}</a>
           </td>
           <td>{{ d.perms }}</td>
           <td></td>
-          <td>{{ d.target }}</td>
         </tr>
       {% endfor %}
       {% for f in files %}
         <tr>
           <td class="swh-content">
             <i class="fa fa-file-text fa-fw" aria-hidden="true"></i>
             <a href="{{ f.url | safe }}">{{ f.name }}</a>
           </td>
           <td>{{ f.perms }}</td>
           <td>{{ f.length }}</td>
-          <td>{{ f.target }}</td>
         </tr>
       {% endfor %}
     </tbody>
   </table>
 </div>
\ No newline at end of file
diff --git a/swh/web/templates/includes/snapshot-context.html b/swh/web/templates/includes/snapshot-context.html
index cf97835e..5efe715a 100644
--- a/swh/web/templates/includes/snapshot-context.html
+++ b/swh/web/templates/includes/snapshot-context.html
@@ -1,47 +1,46 @@
 {% comment %}
 Copyright (C) 2017-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 <div class="card">
   <div class="card-header bg-gray-light">
     {% if snapshot_context.origin_info %}
-      <div class="float-left">
-        <a href="{{ snapshot_context.browse_url }}" class="btn btn-default btn-sm" role="button">See visits</a>
-      </div>
-      {% if snapshot_context.origin_info.url|slice:"0:4" == "http" %}
-        <div class="float-right">
-          <a href="{{ snapshot_context.origin_info.url }}" class="btn btn-default btn-sm" role="button">Go to origin</a>
-        </div>
-      {% endif %}
       {% if snapshot_context.origin_info.type %}
-        <a href="{% url 'browse-origin' snapshot_context.origin_info.type snapshot_context.origin_info.url %}">
+        <a class="swh-heading-color" href="{% url 'browse-origin' snapshot_context.origin_info.type snapshot_context.origin_info.url %}">
       {% else %}
         <a href="{% url 'browse-origin' snapshot_context.origin_info.url %}">
       {% endif %}
-        <h4 class="text-center">Origin: {{ snapshot_context.origin_info.url }}</h4>
-        <div class="clearfix"></div>
+        <h4 class="text-center">
+          Origin: {{ snapshot_context.origin_info.url }}
+          {% if snapshot_context.origin_info.url|slice:"0:4" == "http" %}
+            <a href="{{ snapshot_context.origin_info.url }}" title="Go to origin"><i class="fa fa-external-link" aria-hidden="true"></i></a>
+          {% endif %}
+        </h4>
       </a>
+
     {% else %}
       <a href="{{ snapshot_context.browse_url }}">
         <h4 class="text-center">Snapshot: {{ snapshot_context.snapshot_id }}</h4>
-        <div class="clearfix"></div>
       </a>
     {% endif %}
   </div>
   <div class="swh-origin-visit-details">
     <ul>
+      {% if snapshot_context.origin_info %}
+        <li><i class="fa fa-calendar fa-fw"></i><a href="{{ snapshot_context.browse_url }}">Visits</a></li>
+      {% endif %}
       {% if snapshot_context.visit_info %}
-        <li><i class="fa fa-calendar fa-fw"></i> Visit date: <a href="{{ snapshot_context.visit_info.url }}">{{ snapshot_context.visit_info.fmt_date }}</a></li>
+        <li><i class="fa fa-camera fa-fw"></i> Snapshot date: <a href="{{ snapshot_context.visit_info.url }}">{{ snapshot_context.visit_info.fmt_date }}</a></li>
       {% endif %}
       <li><i class="fa fa-code-fork fa-fw"></i> <a href="{{ snapshot_context.branches_url }}">Branches ({{ snapshot_context.branches|length}})</a></li>
       {% if snapshot_context.releases %}
         <li><i class="fa fa-tag fa-fw"></i> <a href="{{ snapshot_context.releases_url }}">Releases ({{ snapshot_context.releases|length }})</a></li>
       {% else %}
         <li><i class="fa fa-tag fa-fw"></i> Releases (0)</li>
       {% endif %}
     </ul>
   </div>
 </div>
diff --git a/swh/web/templates/origin-visits.html b/swh/web/templates/origin-visits.html
index f219083d..78c5b608 100644
--- a/swh/web/templates/origin-visits.html
+++ b/swh/web/templates/origin-visits.html
@@ -1,88 +1,84 @@
 {% extends "browse.html" %}
 
 {% comment %}
 Copyright (C) 2017-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load static %}
 {% load swh_templatetags %}
 {% load render_bundle from webpack_loader %}
 
 {% block header %}
 {{ block.super }}
 {% render_bundle 'origin' %}
 {% endblock %}
 
 {% block swh-browse-before-content %}
 <div class="card">
   <div class="card-header bg-gray-light border-bottom-0">
-    <div class="float-left">
-        <a href="{% url 'browse-origin' origin_info.type origin_info.url %}" class="btn btn-default btn-sm" role="button">Latest snapshot</a>
-    </div>
-    {% if origin_info.url|slice:"0:4" == "http" %}
-      <div class="float-right">
-        <a href="{{ origin_info.url }}" class="btn btn-default btn-sm" role="button">Go to origin</a>
-      </div>
-    {% endif %}
-    <h4 class="text-center">Origin: {{ origin_info.url }}</h4>
-    <div class="clearfix"></div>
+    <h4 class="text-center">
+      Origin: {{ origin_info.url }}
+      {% if origin_info.url|slice:"0:4" == "http" %}
+        <a href="{{ origin_info.url }}" title="Go to origin"><i class="fa fa-external-link" aria-hidden="true"></i></a>
+      {% endif %}
+      </h4>
   </div>
 </div>
 {% endblock %}
 
 {% block swh-browse-content %}
 <div class="card-header bg-gray-light">
   <div class="float-left">
     <h4>{{ swh_object_name }}</h4>
   </div>
   <div class="clearfix"></div>
 </div>
 
 <div class="card-body">
 
   <h4>Overview</h4>
 
   <ul>
     <li>Total number of visits: <b>{{ origin_visits|length }}</b></li>
     <li>Last full visit: <span style="margin-left: 20px;" id="swh-last-full-visit"></span></li>
     <li>First full visit: <span style="margin-left: 20px;" id="swh-first-full-visit"></span></li>
     <li>Last visit: <span style="margin-left: 20px;" id="swh-last-visit"></span></li>
   </ul>
 
   <h4>History</h4>
 
   <div class="btn-group btn-group-toggle d-flex justify-content-center" data-toggle="buttons">
     <label class="btn btn-default btn-sm form-check-label active" onclick="swh.origin.showFullVisitsDifferentSnapshots(event)">
       <input type="radio" name="options" id="option1" autocomplete="off" checked> Show full visits with different snapshots
     </label>
     <label class="btn btn-default btn-sm form-check-label" onclick="swh.origin.showFullVisits(event)">
       <input type="radio" name="options" id="option2" autocomplete="off"> Show all full visits
     </label>
     <label class="btn btn-default btn-sm form-check-label" onclick="swh.origin.showAllVisits(event)">
       <input type="radio" name="options" id="option3" autocomplete="off"> Show all visits
     </label>
   </div>
 
   <h5>Timeline</h5>
 
   <div id="swh-visits-timeline" class="d3-wrapper"></div>
 
   <h5>Calendar</h5>
 
   <div id="swh-visits-calendar"></div>
 
   <h5>List</h5>
 
   <div id="swh-visits-list"></div>
 
 </div>
 
 <script>
   // all origin visits
   var visits = {{ origin_visits|jsonify }};
   swh.origin.initVisitsReporting(visits);
 </script>
 {% endblock %}
diff --git a/swh/web/templates/revision.html b/swh/web/templates/revision.html
index 15b32e4b..38305cbb 100644
--- a/swh/web/templates/revision.html
+++ b/swh/web/templates/revision.html
@@ -1,103 +1,103 @@
 {% extends "browse.html" %}
 
 {% comment %}
 Copyright (C) 2017-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load static %}
 {% load swh_templatetags %}
 {% load render_bundle from webpack_loader %}
 
 {% block header %}
 {{ block.super }}
 {% render_bundle 'revision' %}
 {% endblock %}
 
 {% block swh-browse-content %}
-<div style="height: 35px;margin: 4px;">
+<div style="margin: 4px;">
   <i class="octicon octicon-git-commit fa-fw"></i>Revision <b>{{ swh_object_metadata.id }}</b>
   authored by {{ swh_object_metadata.author }} on <b>{{ swh_object_metadata.date }}</b>
 </div>
 
 <div class="card">
   <div class="card-header bg-gray-light border-bottom-0">
     <a data-toggle="collapse" id="swh-collapse-revision-message" href="#swh-revision-message">
       <div class="float-left">
         <pre style="white-space: pre-wrap; background-color: inherit; padding: 0px; margin: 0px; border: none;"><h5 style="padding-bottom: 0px; font-weight: normal;">{{ message_header }}</h5></pre>
       </div>
       <div class="clearfix"></div>
     </a>
   </div>
   {% if message_body %}
     <div id="swh-revision-message" class="collapse show">
       <pre style="white-space: pre-wrap; margin: 0px; border: none; border-radius: 0px;">{{ message_body }}</pre>
     </div>
   {% endif %}
 </div>
 
 <div style="margin: 4px; padding-bottom: 5px;">
   {{ parents_links }}
 </div>
 
 <ul class="nav nav-tabs" style="padding-left: 5px;">
   <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#swh-revision-tree">Files</a></li>
   <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#swh-revision-changes">Changes</a></li>
 </ul>
 
 <div class="tab-content">
   <div id="swh-revision-tree" class="tab-pane active">
     {% include "includes/top-navigation.html" %}
     {% if content_size %}
       {% include "includes/content-display.html" %}
     {% else %}
       {% include "includes/directory-display.html" %}
     {% endif %}
   </div>
 
   <div id="swh-revision-changes" class="tab-pane">
     <div id="swh-too-large-revision-diff" class="alert alert-warning" role="alert" style="display: none; margin: 5px 5px 0px 5px">
       The diff you're trying to view is too large. Only the first <span id="swh-nb-loaded-diffs">1000</span> changed files have been loaded.
     </div>
     <div id="swh-revision-diffs" style="padding: 5px; padding-bottom: 0;">
       <div class="card">
         <div class="card-header bg-gray-light border-bottom-0">
           <a data-toggle="collapse" href="#swh-revision-changes-list">
             <div class="float-left">
               Showing <strong id="swh-revision-changed-files"></strong>
               with <strong id="swh-revision-lines-added" style="color:green">0 additions</strong>
               and <strong id="swh-revision-lines-deleted" style="color:red">0 deletions</strong>
               (<span id="swh-nb-diffs-computed">0</span> / <span id="swh-total-nb-diffs">0</span> diffs computed)
             </div>
             <div class="float-right">
               <button class="btn btn-default btn-sm" type="button" onclick="swh.revision.computeAllDiffs(event)" id="swh-compute-all-diffs"
                       title="By default, diffs will be computed as the view is scrolled.
 Pushing that button will request the immediate computation of all diffs." style="visibility: hidden;">Compute all diffs</button>
             </div>
             <div class="clearfix"></div>
           </a>
         </div>
         <div id="swh-revision-changes-list" class="collapse show">
           <div id="swh-revision-changes-loading" class="text-center">
             <img src="{% static "img/swh-spinner.gif" %}"></img>
             <p>Computing file changes ...</p>
           </div>
           <pre style="background: none; border: none; display: none;"></pre>
         </div>
       </div>
     </div>
   </div>
 </div>
 
 <script>
   var revMsgBody = {{ message_body|jsonify }};
   var diffRevUrl = {{ diff_revision_url|jsonify }};
   swh.revision.initRevisionDiff(revMsgBody, diffRevUrl);
 </script>
 {% endblock %}
 
 {% block swh-browse-after-content %}
 {% include "includes/readme-display.html" %}
 {% endblock %}